<template>
	<cl-crud ref="crud" @load="onLoad" :on-refresh="onTableRefresh('user_name')">
		<cl-pagefull>
			<template #head>
				<el-row type="flex">
					<cl-filter-group v-model="search" @reset="changeBiz">
						<cl-filter label="事业部">
							<cl-select
								v-model="search.biz_id"
								placeholder="请选择"
								filterable
								@change="changeBiz"
								style="width: 160px"
							>
								<el-option
									v-for="item in business"
									:key="item.biz_id"
									:label="item.biz_name"
									:value="item.biz_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="分公司">
							<cl-select
								v-model="search.company_id"
								placeholder="请选择"
								clearable
								filterable
								style="width: 160px"
								@change="refresh"
							>
								<el-option label="全部" value="" />

								<el-option
									v-for="item in bizRefData.company"
									:key="item.company_id"
									:label="item.company_name"
									:value="item.company_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="品牌">
							<cl-select
								v-model="search.bra_id"
								placeholder="全部"
								clearable
								filterable
								style="width: 160px"
								@change="refresh"
								multiple
								collapse-tags
							>
								<el-option
									v-for="item in bizRefData.brand"
									:key="item.bra_id"
									:label="item.bra_name"
									:value="item.bra_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="所属部门">
							<!-- <cl-select
								v-model="search.dept_id"
								placeholder="请选择"
								clearable
								filterable
								style="width: 160px"
								@change="refresh"
							>
								<el-option
									v-for="item in deptList"
									:key="item.dept_id"
									:label="item.dept_name"
									:value="item.dept_id"
								/>
							</cl-select> -->
							<cl-cascader
								clearable
								v-model="search.dept_ids"
								:options="deptList"
								collapse-tags
								style="min-width: 230px"
								:props="{
									multiple: true,
									value: 'dept_id',
									label: 'dept_name'
								}"
								filterable
								@change="refresh"
							/>
						</cl-filter>
						<cl-filter label="组员姓名">
							<el-input
								v-model="search.user_name"
								placeholder="请填写组员姓名"
								style="width: 160px"
								@change="refresh"
								clearable
							/>
						</cl-filter>
						<cl-filter label="订单ID">
							<el-input
								v-model="search.order_id"
								placeholder="请填写订单号"
								style="width: 160px"
								@change="refresh"
								clearable
							/>
						</cl-filter>
						<cl-filter label="广告账户账号">
							<el-input
								v-model="search.id_supplier"
								placeholder="请填写广告账户账号"
								style="width: 160px"
								@change="refresh"
								clearable
							/>
						</cl-filter>
						<cl-filter label="订单状态">
							<cl-select
								v-model="search.status"
								placeholder="请选择订单状态"
								clearable
								@change="refresh"
							>
								<el-option
									v-for="item in statusList"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								>
								</el-option>
							</cl-select>
						</cl-filter>
						<cl-filter label="定金类别">
							<cl-select
								v-model="search.type"
								placeholder="请选择定金类别"
								clearable
								@change="refresh"
							>
								<el-option
									v-for="item in typeList"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								>
								</el-option>
							</cl-select>
						</cl-filter>
						<cl-filter label="收取时间">
							<cl-date-picker
								v-model="search.date"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd"
								style="width: 210px"
								@change="refresh"
							/>
						</cl-filter>
					</cl-filter-group>
					<cl-flex1 />
					<cl-table-handle
						:print="printParams"
						:columns="initColumns"
						v-model="table.columns"
						@export-file="exportFile"
					/>
				</el-row>
			</template>
			<el-row>
				<!-- 数据表格 -->
				<cl-table v-bind="table" id="collectList">
					<cl-empty slot="empty" />
					<template #column-customer="{ scope: { row } }">
						<cl-customer
							:gender="row.cus_sex"
							:name="row.cus_name"
							:mobile="row.cus_mobile"
							:wechat="row.cus_wx || '-'"
							:avatar="row.cus_img"
						/>
					</template>
					<template #column-other="{ scope: { row } }">
						<template v-for="(val, key) in otherMap">
							<div v-if="row.data_set[key]" :key="key">
								{{ val }}：{{ row.data_set[key] }}
							</div>
						</template>
					</template>
					<template #column-opt="{ scope: { row } }">
						<div class="flex flex-align-start">
							<el-button
								type="primary"
								:disabled="row.status == 1"
								@click.stop="getPayResult(row)"
								:loading="row.loading"
							>
								查询支付结果
							</el-button>
						</div>
					</template>
				</cl-table>
			</el-row>
			<template #foot>
				<el-row type="flex">
					<cl-flex1 />
					<!-- 分页控件 -->
					<cl-pagination />
				</el-row>
			</template>
		</cl-pagefull>
	</cl-crud>
</template>
<script>
	import { exportExcel } from "@/utils/excel";
	import { cloneDeep } from "cl-admin/utils";
	import { delEmptyChildren } from "@/utils";

	const payTypeMap = {
		ali: "支付宝",
		wechat: "微信",
		other: "其它"
	};

	const otherMap = {
		consignee_name: "收货人",
		consignee_tel: "收货人手机号",
		region_str: "预约地区",
		appoint_date: "预到店时间"
	};
	export default {
		data() {
			return {
				otherMap,
				printParams: {
					id: "collectList",
					popTitle: "收款列表"
				},
				// 表格配置
				table: {
					"context-menu": ["refresh"],
					columns: []
				},
				initColumns: [
					{
						type: "index",
						label: "#",
						align: "center",
						width: 50,
						fixed: true,
						disable: true
					},
					{
						label: "所属事业部",
						prop: "biz_name",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "分公司",
						prop: "company_name",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "品牌",
						prop: "bra_name",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "部门",
						prop: "dept_name",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "组员",
						prop: "user_name",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "定金金额（￥）",
						prop: "dep_amount",
						minWidth: 120
					},
					{
						label: "优惠金额（￥）",
						prop: "discount",
						minWidth: 120
					},
					{
						label: "实付金额（￥）",
						prop: "real_pay",
						minWidth: 120
					},
					{ label: "下定日期", prop: "pay_date", minWidth: 140 },
					{ label: "创建日期", prop: "addtime", minWidth: 140 },
					{
						label: "订单ID",
						prop: "order_id",
						minWidth: 200,
						formatter: (row) => `${row.order_id}:`
					},
					{ label: "手机号", prop: "user_mobile", width: 120 },
					{ label: "IP", prop: "ip", minWidth: 120 },
					{
						label: "支付方式",
						prop: "pay_type",
						minWidth: 100,
						align: "left",
						showOverflowTooltip: true,
						formatter: ({ pay_type }) => payTypeMap[pay_type] || "其它"
					},
					{
						label: "支付状态",
						prop: "status",
						minWidth: 100,
						formatter: ({ status }) => {
							return status == 0 ? "未支付" : status == 1 ? "已支付" : "退回";
						}
					},
					{
						label: "是否复制",
						prop: "is_copy",
						minWidth: 100,
						formatter: ({ is_copy }) => (is_copy == 1 ? "是" : "否")
					},
					{
						label: "报名者",
						prop: "name",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "课程",
						prop: "course",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "推广人",
						prop: "promoter",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "收货地址",
						prop: "address",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "联系电话",
						prop: "mobile",
						width: 120
					},
					{
						label: "广告账户账号",
						prop: "id_supplier",
						width: 120
					},
					{
						label: "其他",
						prop: "other",
						minWidth: 200,
						align: "left",
						showOverflowTooltip: true
					},
					{ label: "操作", prop: "opt", minWidth: 140, fixed: "right", disable: true }
				],
				// 订单状态
				statusList: [
					{ value: "", label: "全部" },
					{ value: 1, label: "已支付" },
					{ value: 2, label: "退回" },
					{ value: 3, label: "未支付" }
				],
				// 定金类别
				typeList: [
					{ value: "", label: "全部" },
					{ value: 1, label: "定金" },
					{ value: 2, label: "商学院" },
					{ value: 3, label: "商城" }
				],
				deptList: [],
				search: {
					order_id: "",
					user_name: "",
					id_supplier: "",
					date: [
						// dayjs()
						// 	.startOf("month")
						// 	.format("YYYY-MM-DD"),
						// dayjs().format("YYYY-MM-DD")
					],
					type: "",
					status: "",
					biz_id: "",
					company_id: "",
					bra_id: [],
					// dept_id: ""
					dept_ids: []
				}
			};
		},
		computed: {
			bizRefData() {
				const { biz_id } = this.search;
				return this.getBizRefData(biz_id);
			}
		},
		created() {
			this.search.biz_id = this.getCurrBiz();
			this.init();
			this.table.columns = cloneDeep(this.initColumns);
		},
		methods: {
			async init() {
				const { biz_id } = this.search;
				this.getBizRefBrand(biz_id);
				this.getBizRefCompany(biz_id);
				// this.search.bra_id = this.brandList[0]?.value;
				// this.$refs.crud.refresh(this.search);
				this.initData();
			},
			async initData() {
				const { biz_id } = this.search;
				this.deptList = delEmptyChildren(
					(await this.$store.dispatch("common/getDept", {
						biz_id,
						needCascader: true
					})) || []
				);
			},
			onLoad({ ctx, app }) {
				ctx.service(this.$service.deposit)
					.set("dict", {
						// 请求
						api: {
							page: "orderList"
						}
					})
					.done();
				app.refresh(this.search);
			},
			// crud刷新
			refresh() {
				this.$refs.crud.refresh({ page: 1, ...this.search });
			},
			async getPayResult(row) {
				this.$set(row, "loading", true);
				const res = await this.$service.deposit
					.query({
						order_id: row.order_id,
						biz_id: row.biz_id
					})
					.done(() => {
						this.$set(row, "loading", false);
					});
				this.$message.closeAll();
				if (res.status == "SUCCESS") {
					this.$set(row, "status", 1);
					this.$message.success(res.message);
					return;
				}
				this.$message.warning(res.message);
			},
			changeBiz() {
				this.search = {
					...this.search,
					company_id: "",
					bra_id: [],
					dept_ids: []
				};
				this.init();
				this.refresh();
			},
			// 导出EXCEl
			exportFile() {
				exportExcel("#collectList");
			}
		}
	};
</script>
